<template>
  <div id="top-rated-wrap">
      <div class="top-rated">
        <p class="title">最受好评电影</p>
        <div class="top-rated-list">
            <div @click="sendid(data.filmId)" v-for="data in filmitems" :key="data.filmId" class="top-rated-item">
                <div class="poster default-img-bg">
                    <img :src="data.poster">
                    <span class="wish-bg"></span>
                    <span class="score">
                    观众评分
                    <span class="rated-score">{{data.grade}}</span>
                    </span>
                </div>
                <h5 class="name line-ellipsis">{{data.name}}</h5>
            </div>
        </div>
      </div>
  </div>
</template>
<style scoped>
::-webkit-scrollbar {
    height: 0!important;
}
.hot-celebrities, .hot-news, .top-rated {
    padding: 12px 0 12px 15px;
    background-color: #fff;
    margin-bottom: px;
}
.hot-celebrities .title, .hot-news .title, .top-rated .title {
    margin: 0;
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
}
.hot-celebrities-list, .top-rated-list {
    overflow: scroll;
    white-space: nowrap;
}
.top-rated-item {
    display: inline-block;
    width: 85px;
    overflow: hidden;
    margin-right: 10px;
}
.top-rated-item .poster {
    width: 85px;
    height: 115px;
    position: relative;
    margin-bottom: 6px;
}
.default-img-bg {
    background-color: #e1e1e1;
    background-size: 100% 100%;
}
.top-rated-item .poster img {
    height: 100%;
}
img {
    display: block;
    width: 100%;
}
.top-rated-item .poster .wish-bg {
    display: inline-block;
    width: 100%;
    height: 35px;
    position: absolute;
    bottom: 0;
    background-image: -webkit-linear-gradient(top,rgba(77,77,77,0),#000);
    background-image: linear-gradient(
-180deg
,rgba(77,77,77,0),#000);
}
.top-rated-item .poster .score, .top-rated-item .poster .wish {
    position: absolute;
    left: 4px;
    bottom: 2px;
    color: #faaf00;
    font-size: 11px;
    font-weight: 600;
}
.top-rated-item .name {
    margin: 0;
    font-size: 13px;
    color: #222;
    margin-bottom: 3px;
}
.line-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
</style>
<script>
// import axios from 'axios'
import http from '@/Util/http'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      filmitems: null
    }
  },
   computed:{
      ...mapState('City',['Cityid'])
  },
  methods: {
    sendid (filmId) {
      this.$router.push(`/Detail/${filmId}`)
    }
  },
  mounted () {
    http({
      url: `/gateway?cityId=${this.Cityid}&pageNum=1&pageSize=10&type=1&k=1335803`,
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      },
      method: 'get'
    }).then(res => {
      this.filmitems = res.data.data.films
      // console.log(this.filmitems)
    })
  }
}
</script>
